<template id="vueCom_tp">
    <div>

        <div class="vuewrap">
            <div class="tops">
                <div style="margin-left: 30px; line-height: 200px;">Vue页面开发流程梳理</div>
                <img src="./assets/img/Vue.png" width="400" alt="" class="bg">
                <img src="./assets/img/Vue.png" width="100" alt="">
            </div>
            <div v-for="v in datas">
                <div class="publictitle">
                    {{v.name}}
                </div>
                <div class="publiccontrap">{{v.cont}}</div>
            </div>
        </div>

    </div>
</template>

<script>
    /*export default*/
    window.vueCom_tp = {
        template: '#vueCom_tp',
        data() {
            return {
                datas: [
                    {
                        name: 'vue脚手架項目創建的步驟在這個地方就直接省略掉了，從頁面創建開始去進行梳理', cont: `
創建要進行開發的一個vue文件，文件格式後綴是.vue，
//
然後找到router文件，在相應的數組裏面配置相關的頁面對象，配置完之後，對過配置的頁面路徑，就可以訪問頁面，
//
然後在頁面開發的過程中：\n
template標簽裏面放置的是相關html的頁面内容\n
script裏面通過export default 來暴露一個頁面組件實例，所有的dom操作和數據響應，都是在這個實例裏面完成的\n
style裏面就是處理樣式的，加個scoped代表就是組件私有樣式\n
/**/
在script裏面涉及到一個data這樣的函數，是專門存該頁面的數據的，然後可以通過一些metheds函數來對data進行修改處理，這些函數和data都可以放到一個叫mounted的鈎子函數裏面去進行調用或者屬性值修改，比如下面的

data(){return {
    //這是存放數據的地方
    msg:111,
    msg2:222
}}

methods:{
    //這是定義的一些方法
    setmsg(){
        this.msg = 123
    }
}

mounted(){
    this.setmsg()//在mounted裏面，頁面挂載完了之後，會立即調用
    this.msg2 = 223//或者可以直接對屬性進行修改
}

上面完整鏈路打通了，可以做一些數據動態改變或數據監聽

computed:{
    xxx(){
        return 返回一個結果
    }
}

使用的時候直接拿xxx作爲數據就行，這個是計算屬性，你甚至可以用get和set對這個xxx進行修改和獲取的邏輯自定義

然後下面就是監聽

watch:{
    xxxdata屬性(news,old){
        ...
    }
}

當上面的xxx屬性發生改變的時候，會走裏面的邏輯，如果是深度監聽對象和數組的話，需要對這個監聽進行deep，immediate，handler的配置

在vue3裏面，你甚至還可以使用$root來獲取全局data數據和methods函數等進行使用

如果頁面離開需要對内容進行銷毀的時候，可以進行下面的操作

destroyed(){...}//一些頁面銷毀時的操作

那麽這樣一來基本的頁面數據以及方法的交互流程就已經確立了，然後把data裏面的數據放到頁面上去展示就行，如果是數組那就可以v-for遍歷出來

整個頁面，他就是一個組件，你還可以在頁面裏面去引入其他的組件去進行使用

//

另外一个就是目前vue选项api和组合式api，也就是hook，均可以使用

选项api的功能可以通过类比的形式，去放到hook的api里面实现同样的效果，有些选项api的功能可能在hook里面没有对应api使用，需要想别的办法去进行实现
                        `
                    }
                ]
            }
        }
    }
</script>

<style>
    .vuewrap .tops {
        position: relative;
        height: 200px;
        background-color: #ace2e5;
        overflow: hidden;
        z-index: 1;
    }

    .vuewrap .tops img {
        position: absolute;
        right: 30px;
        top: 50px
    }

    .vuewrap .tops .bg {
        opacity: .3;
        top: -50px
    }
</style>